<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>-商品搜素</title>
    <script src="js/jquery.min.js"></script>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
        list-style: none;
    }

    section {
        margin: auto;
    }

    .bg {
        margin: 0px auto;
        width: 1300px;
        margin-bottom: 30px;
    }

    .div_recommend, .ul_recommend {
        width: 1300px;
        display: inline-block;
        text-align: center;
    }

    .ul_recommend {
        padding-left: 5px;
    }

    .ul_recommend .li_recommend {
        width: 250px;
        height: 340px;
        background-color: #fff;
        margin-top: 10px;
        margin-right: 10px;
        transition: all 0.5s linear;
        position: relative;
    }

    .li_recommend:hover {
        box-shadow: 0px 0px 1px 1px #ccc;
        transition: all 0.5s linear;
        opacity: 0.8;
    }

    .li_img {
        width: 200px;
        height: 200px;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .li_p {
        font-size: 16px;
        font-weight: normal;
        margin-left: 10px;
        margin-right: 10px;
        color: #000;
        position: absolute;
        bottom: 50px;
    }

    .money {
        font-size: 23px;
        color: #b32c0f;
        margin-top: 10px;
        text-align: left;
        margin-left: 20px;
        font-weight: bold;
        position: absolute;
        bottom: 10px;

    }

    .money sup {
        font-size: 12px;
        color: #b32c0f;
        position: relative;
        top: 6px;
        left: 2px;
        font-weight: bold;
    }

    .select_store {
        width: 1300px;
        margin: 20px auto;
        height: 100px;
        background-color: white;
        clear: both;
    }

    .select_store img {
        float: left;
        width: 200px;
        height: 80px;
        margin-top: 10px;
        margin-left: 10px;
    }

    .store_name {
        float: left;
        margin-left: 30px;
        margin-top: 5px;
        color: grey;
    }

    .search_title {
        clear: both;
        width: 1300px;
        height: 40px;
        line-height: 40px;
        font-size: 25px;
        font-family: "STXINWEI";
        text-indent: 30px;
        margin: 20px auto;
        color: white;
        background-color: #57CC99   ;
    }
</style>
<body>
<%@include file="header.jsp" %>
<section>
            <div class="search_title">店铺</div>
        <div class="select_store">
            <img src="" alt="">
            <h2 class="store_name"></h2>
        </div>
    <div class="bg">
        <div class="search_title">商品</div>
            <h1 style="text-align: center;color: red">抱歉，没有找到与关键词相关的商品</h1>
        <div class="div_recommend">
            <ul class="ul_recommend">
            </ul>
        </div>
    </div>
</section>
<%@include file="footer.jsp" %>
<script>
window.onload = function() {
    const params = new URLSearchParams(window.location.search);
    const searchName = params.get("searchName");
    searchCommodity(searchName);
}
    function searchCommodity(searchName) {
        const ul_recommend = $(".ul_recommend");
        $.ajax({
            type: "post",
            url: "commodity/findAllCommodity",
            data: {
                commodityName:searchName
            },
            dataType: "json",
            success: function (res) {
                console.log(12345)
                if (res.msg == "success") {
                    for (let i = 0; i <= res.data.length && i < 30; i++) {
                        html =
                            "<a href='/patMall/commodityDetails.jsp?commodityId=" + res.data[i].commodityId + "'>" +
                            "<li class='li_recommend'>" +
                            "<img src='../" + res.data[i].commodityImgList[0].commodityImg + "' class='li_img'>" +
                            "<p class='li_p'>" + res.data[i].commodityName + "</p>" +
                            "<p class='money'>￥" + res.data[i].commodityPrice + "</p></li></a>";
                        ul_recommend.append(html);
                    }
                } else if (res.msg == "fail") {
                    alert("商品查询失败");
                } else if (res.msg == "NoFound") {
                    alert("没有商品");
                }
            },
            error: function () {
                alert("Error");
            }
        })
    }
</script>
</body>
</html>
